<template>
    <van-row>
        <van-col span="2">
            <van-nav-bar left-arrow @click-left="onClickLeft" :border=false />

        </van-col>
        <van-col span="22">
            <van-search v-model="keyword" placeholder="请输入搜索关键词" shape="round" />
        </van-col>
    </van-row>
    <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item title="销量" just-trigger @click="onFilter" />
        <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div class="products" v-for="item in productData" >
        <van-swipe-cell>
            <van-card :num="item.stockQuantity" :price="item.productSalePrice" :desc="item.productIntroduction" :title="item.productName" class="goods-card"
                :thumb="item.productImage" @click="onchange(item.id)"/>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
        <!-- <hr> -->
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { listProduct,getProduct } from '@/api/product/product';
import {useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const keyword = ref('');
const value1 = ref(0);
const value2 = ref('a');
const option1 = [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
];
const option2 = [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];
const productData =ref()
const id=ref()
onMounted(() => { 
    console.log(route.query.categoryId);
    CallProductApi();
   
    
   id.value = route.query.categoryId;
   
   
    
})


const CallProductApi = () => { 
    // getProduct(productData.categoryId).then(res => {
    //     console.log(res);

    //     productData.value = res.data;
    // })
    listProduct().then(res => {
        console.log(res);
        const items = res.data.filter(item => { 
            if (id.value == item.categoryId) {
                return item
            }
           
        })
        console.log(items);
        productData.value = items;
    })
}

const onFilter = () => { 
    console.log("点击状态");
    // showToast('此时请脑补 van-filter 打开的样子')
    
}

const onchange = (id) => { 
    router.push({ path:'/malldetail',query:{id:id}});
}
const onClickLeft = () => history.back();
</script>

<style scoped>
 .goods-card {
     margin: 0;
     background-color: white;
 }

 .delete-button {
     height: 100%;
 }
.products{
    :deep(.van-card__content){
        border-bottom: 1px solid #dbdcde !important;
    }
}
</style>